<template>
	<view class="container">
		<topBar>
			<text>员工管理</text>
			<template #right>
				<image class="topbar-icon" src="/static/img/common/search1.png"></image>
			</template>
		</topBar>
		<view class="top-btns">
			<ButtonBox :btn-arr="topBtnArr" @btnClick="changeTopBtn" />
		</view>
		<scroll-view scroll-y class="people-list">
			<PersonnelItem :people="item" v-for="item in peopleList" :key="item.id" @click="seeDetail(item)" />

		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import ButtonBox from '@/components/buttonBox/buttonBox.vue';
	import PersonnelItem from '@/components/consumptionAdmin/personnelItem/personnelItem.vue';
	const topBtnArr = ['已认证', '未认证']
	const changeTopBtn = (btn) => {
		if (btn.includes('已认证')) {

		} else {

		}
	}
	// 员工列表
	const peopleList = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 3 },])
	// 查看员工详情
	const seeDetail = (item) => {
		uni.navigateTo({
			url: '/pages/consumptionAdmin/personnelDetail/personnelDetail'
		})
	}
</script>

<style scoped lang="scss">
	.topbar-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.top-btns {
		margin-bottom: 32rpx;
		padding: 20rpx 32rpx;
		background-color: #fff;
	}

	.people-list {
		padding: 0rpx 32rpx;
		height: 1200rpx;
		box-sizing: border-box;
	}
</style>